<template>


	<block v-if="isshow">
		<view v-if="m.type=='tips' || m.message.type=='tips'" class="chat-tips">
			<view v-if="m.message.content.type=='time'  && m.message.content.text!=''" class="chat-tips-time">
				{{m.message.content.text}}
			</view>
			<view v-else class="chat-tips-time">{{m.message.content}}</view>
			<view v-if="m.message.content.type=='redpack_tip'" class="chat-tips-time">
				<text class="redpack-icon"></text>
				{{m.message.content.text}}
			</view>
		</view>


		<!-- 消息类型 开始 -->
		<view v-else :class="{'chat-item':true,'chat-item-reverse': m.sender.id==userid}" :id="m._mid">
            
			<!-- 头像 -->
			<view class="avatar" @tap="clickAvatar(m)" :key="m.sender.id" @longtap="atusuer(m)">
				<image :src="userid===m.sender.id? avatar:image_cache(m.sender.avatar)"></image>
			</view>

			<view class="content" :id="'msg_'+m.msg_id">
				<!-- 用户昵称 -->
				<view class="nickname" v-if="m.sender.id!=userid && m.group_id>0 || m.id==0" @tap="clickAvatar(m)">
					{{ m.sender.nickname}}
				</view>

				<view class="item">

					<view v-if="m.message.type=='text'" class="text" @longtap="msgAction($event,m)">

						<block v-if="m.message.content.type=='remind' || m.message.content.type=='emotion'">

							<view v-if="m.message.content.remind.id==userid" style="color: #a9d3ff;">

								<block v-if="isindexhtml(m.message.content.content)">
									<rich-text :nodes="m.message.content.content"></rich-text>
								</block>
								<block v-else> {{m.message.content.content}}</block>
							</view>
							<block v-else>
								<block v-if="isindexhtml(m.message.content.content)">
									<rich-text :nodes="m.message.content.content"></rich-text>
								</block>
								<block v-else> {{m.message.content.content}}</block>

							</block>
						</block>

						<block v-else>

							<block v-if="isindexhtml(m.message.content)">
								<rich-text :nodes="m.message.content"></rich-text>
							</block>
							<block v-else> {{m.message.content}}</block>
						</block>

					</view>


					<!-- 表情 -->
					<view v-if="m.message.type=='emotion' || m.message.type== 'emoji'" class="text" @longtap="msgAction($event,m)">
						<block v-for="(m1,index1) in faces" :key="index1">
							<block v-if="m1.type=='img'">
								<image :src="m1.content" class="emotion"></image>
							</block>

							<block v-else>{{m1.content}}</block>
						</block>
					</view>


					<!-- 超链接 -->
					<view v-if="m.message.type=='url'" class="text" @longtap="msgAction($event,m)">
						<url :content="m.message.content" :self="m.self" @clickurl="clickurl" />
					</view>
					<!-- 加群申请 -->
					<view v-if="m.message.type=='apply'" class="text" style="font-size: 14px;"
						@longtap="msgAction($event,m)">
						<view class="showname">{{m.message.content.other.nickname}}</view>
						申请加入<view class="showname">{{m.message.content.other.groupname}}</view>
						<view v-if="m.message.content.other.content">
							<span style="color: #666;">附言：</span>
							{{m.message.content.other.content}}
						</view>

					</view>

					<!-- 视频 -->
					<view v-if="m.message.type=='vedio'" style="border-radius: 10px;background: #666;" class="vedio" @tap="play_vedio(m)"
						@longtap="msgAction($event,m)">
                        <!-- <video style="max-width: 300rpx;"  lass="timeshow" :src="m.message.content.src"></video> -->
						<block v-if="m.isloading==1">

						</block>
						<block v-else>
							<image :src="poster_show(m)" class="vedio_src"></image>
							<image src="/static/img/play.png" class="play_btn"></image>
							<view class="timeshow" v-if="m.message.content.time>0">{{showtime(m.message.content.time)}}
							</view>

						</block>
					</view>
					<!-- 图片 -->
					<view v-if="m.message.type=='image'" class="image" @longtap="msgAction($event,m)">
                    <!-- setPicSize(m.message.content) -->
						<image v-if="!shouldRemoveLoaded" @click="onPreview(m.message.content,m.message.type!='face')" :src="setPicSize(m.message.content)"
							 mode="aspectFit"
                              lazy-load 
                              @load="onSetImageSize($event,m.message.content,m)"
							class='chatimg'
							:style="{width: (isizes[m.message.content] && isizes[m.message.content].width || 0) + 'px', 'height': (isizes[m.message.content] && isizes[m.message.content].height || 200) + 'px'}">
						</image>
               
					</view>


					<!-- 语音 -->
					<view v-if="m.message.type=='voice'" :class="{'voice': true,'voice-play': playVoiceId == m._mid}"
						@tap="playVoice(m)" @longtap="msgAction($event,m)">
						<view class="box">
							<view class="wifi-symbol">
								<view class="wifi-circle first"></view>
								<view class="wifi-circle second"></view>
								<view class="wifi-circle third"></view>
							</view>
						</view>
						<view :class="{'voice-text': true,'voice-text-right': m.self}">
							{{m.message.content.time}}''
						</view>
					</view>
                    <!-- 语音消息   voiceCancel  voiceTime-->
                    
                    <!-- <view class="text"  style="display: flex; align-items: center;">
                        <image style="width: 50rpx;height: 50rpx; margin-left: 15rpx;" :src="'/static/gua1.png':'/static/guaduan.png'"></image>
                    </view> -->
                    <text style='color: #999;font-size: 22upx' v-if="item.message.type == 'emoji'">[表情]</text>
                    <view  class="text" v-if="item.message.type == 'voiceCancel'" style="align-items: center;display: flex; max-width: 200rpx;">
                        {{JSON.parse(item.message.content)}}
                        <image style="width: 50rpx;height: 50rpx; margin-left: 15rpx;" src="/static/guaduan.png"></image>
                    </view>
                    <view class="text" style="align-items: center;display: flex; max-width: 350rpx;" @click="getCall" v-if="item.message.type == 'voiceTime'">
                        {{getMsgIndo(item.message.content)}}''
                        <image style="width: 50rpx;height: 50rpx; margin-left: 15rpx;" src="/static/guaduan.png"></image>
                    </view>
                 
					<!-- 红包 -->
					<view v-if="m.message.type=='redpacket' " @tap='redpack_open(m)'
						:class="{'redpack':true,'redpack-open':m.message.content.isopen==1}"
						@longtap="msgAction($event,m)">
						<view class="info">
							<block v-if="m.sender.id==userid">
								<view class="icon">
									<image
										:src="m.message.content.isopen==1?'/static/img/redpackopen-icon.png':'/static/img/redpack-icon.png'">
									</image>
								</view>
								<view class="showtext">{{m.message.content.title}}</view>

							</block>

							<block v-else>

								<view class="icon">
									<image
										:src="m.message.content.isopen==1?'/static/img/redpackopen-icon.png':'/static/img/redpack-icon.png'">
									</image>
								</view>
								<view class="showtext">{{m.message.content.title}}</view>
							</block>

						</view>
						<view class="title">{{isType[m.message.content.type]}}</view>
					</view>

				</view>



				<!-- 加载中 -->
			<!-- 	<view class="loadingbox" v-if="m._mid==loading_id || m.isloading==1  ||  m.isloading==2">
					<image src="/static/loading.gif" v-if="m._mid==loading_id || m.isloading==1"></image>
					<image src="/static/fail.png" v-if="m.isloading==2"></image>
				</view> -->
			</view>

		</view>

	</block>

</template>

<script>
	import url from './url.vue'
	export default {
		components: {
			url

		},
		props: {
			item: {
				required: true
			},
			loading_id: {
				default: 0
			},
			playVoiceId: {
				default: 0
			},
			userid: {
				default: 0
			},
			unreadid: {
				default: 0
			},
            avatar:{
                type:String,
                default:""
            }

		},

		data() {
			return {
				isizes: {},
				faces: [],
				m: [],
				isshow: false,
                shouldRemoveLoaded:false
			}
		},
		computed: {
			isType() {
				return {
					1: '手气红包',
					2: '红包',
					3: '专属红包',
					4: '口令红包'
				}
			}
            
		},
		methods: {
            getMsgIndo(data){
                // console.log('打印类型',JSON.parse(data).payload)
                return JSON.parse(data).payload 
            },
            //处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
            setPicSize(content) {
            	// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
            	let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
            	  let maxH = uni.upx2px(350);//350是定义消息图片最大高度
            	  if (content.w > maxW || content.h > maxH) {
            	    let scale = content.w / content.h;
            	    content.w = scale > 1 ? maxW : maxH * scale;
            	    content.h = scale > 1 ? maxW / scale : maxH;
            	    let url_array = content.url.split('.');
            	    if (content.url.indexOf('_thumb.') == -1) {
            	      content.url = url_array[0] + '_thumb.' + url_array[1];
            	    }
            	  }
            	  return content;
            },
			isRed(data) {
				return data
			},
			touchend() {
				return false;
			},
			clickAvatar(m) {
				this.$emit('clickAvatar', m)
			},
			msgAction(e, m) {
				this.$emit('msgAction', e, m)
			},
			play_vedio(m) {
				this.$emit('play_vedio', m)
			},
			playVoice(m) {
				this.$emit('playVoice', m)
			},
            getCall(){
                this.$emit('getCall',true)
            },
			atusuer(m) {

				this.$emit('atusuer', m)
			},
			// 口令红包
			redkou_open(m) {
				uni.showModal({
					title: '口令',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入口令', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log('输入的内容：', res.content,m);
							if (!res.content) {
								return uni.showToast({
									title: '请输入口令',
									icon: 'none'
								})
							}
							if (m.message.content.isopen != 0) {
								uni.navigateTo({
									url: '../friend/redpacket_detail?msg_id=' + m.msg_id +
										'&storekey=' + m.cache_key + '&content=' + res.content
								})
							} else {
								m.command = res.content
								console.log('输入的内容：', m);
								this.$emit('redpack_open', m)
								
							}
						}
					}
				})
			},

			// 红包
			redpack_open(m) {
				switch (m.message.content.type) {
					case '1':
						this.getSendPay(m)
						break;
					case '2':
						this.getSendPay(m)
						break;
					case '3':
						this.getSendPay(m)
						break;
					case '4':
						this.redkou_open(m)
						break;

				}


			},
			getSendPay(m) {
				console.log('isgroup',m,m.message.content.isgroup != 0 , m.message.content.type !=3 , m.message.content.isopen == 1)
				if (m.message.content.isgroup != 0 && m.message.content.type !=3 && m.message.content.isopen == 1) {
					uni.navigateTo({
						url: '../friend/redpacket_detail?msg_id=' + m.msg_id + '&storekey=' + m.cache_key
					})
				} else {
					this.$emit('redpack_open', m)
				}
			},
			updatedata(m) {
				console.log(m);
			},
			toText(str) {
				str = str.replace(/&nbsp;/g, " ");
				str = str.replace(/<br>/g, " \n");
				return str;
			},

			toHtml(str) {
				var text = msg.replace(/<\/?[^>]*>/g, '');
				text = text.replace(/\n/g, '<br>');
				text = text.replace(/ /g, '&nbsp;');
				return text;
			},
			isindexhtml(str) {
				var arr = ['<br', '&nbsp;', "<div", "<span"];
				str = str.toString();
				for (var i = 0; i < arr.length; i++) {
					//console.log(str,arr[i])
					if (str.indexOf(arr[i]) > -1) return true;
				}
				return false;
			},
			poster_show(m) {
				if (m.isloading == 1) {
					return false;
				} else {

					var src = m.message.content.src;
					try {
						var arr = src.split('/');
						var filename = arr[arr.length - 1];
						var arr1 = filename.split('.');
						var newname = arr1[0] + "_video.jpg";
						var poster = src.replace(filename, newname);
						return poster;
					} catch (e) {
						//TODO handle the exception
						return "/static/img/vediobanner.jpg";
					}


				}


			},
			clickurl(url) {
				//  console.log(url);
				if (url.indexOf('http') <= -1) url = 'http://' + url;
				let params = {
					url: url
				};

				return this.$jump('web.index', params)
			},
			httpString(str) {
				if (str.toString().indexOf('http') <= -1) {
					//  str='https://'+str;
					//  str=str.toString()
					// console.log(str)
				}

				// var reg = /(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
				var reg =
					/(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9\/][-a-zA-Z0-9\/]{0,62})+(:\d+)*(\/\w+\.\w+)*$/g
				// console.log(str);

				try {

					var s = str.match(reg);
					if (s != null) {
						return s;
					} else {
						return false;
					}
				} catch (e) {
					return false;
				}



			},
			showtime(time) {
				var lost_s = parseInt(time);
				if (lost_s >= 0) {
					var l_s = Math.floor(lost_s % 60);
					var next_s = Math.floor(lost_s / 60);
					var l_m = Math.floor(next_s % 60);
					var next_m = Math.floor(next_s / 60);
					var l_h = Math.floor(next_m % 60);



					if (l_h - 10 < 0) {
						var n_h = "0" + (l_h);
					} else {
						var n_h = (l_h);
					}
					if (l_m - 10 < 0) {
						var n_m = "0" + (l_m);
					} else {
						var n_m = (l_m);
					}
					if (l_s - 10 < 0) {
						var n_s = "0" + (l_s);
					} else {
						var n_s = (l_s);
					}

					if (n_h != '00') var hh = n_h + ":";
					else var hh = '';
					var str = hh + n_m + ':' + n_s + '';
					return str;
				} else {
					return "00:00";
				}
			},
			image_show(m) {
				var src = m.message.content;
				if (src.indexOf('"') > -1) src = src.replace(/"/g, '');
				if (m.isloading == 1) {
					return src;
				} else
					return this.image_cache(src)

			},
			onSetImageSize(e, index,msg) {
                if(msg.isLoaded){
                  msg.isLoaded = false  
                }
				let {
					width,
					height
				} = e.detail;
				let size = 150;
				if (height > size) {
					let p = size / height;
					height = size;
					width = width * p;
				}
				this.$set(this.isizes, index, {
					width,
					height
				});
			},
			onPreview(url, show) {
				if (show) {
					uni.previewImage({
						current: this.image_cache(url),
						urls: [this.image_cache(url)]
					});
				}
			},
			emotion(res) {

				let word = res.replace(/\[|\]/gi, '')

				const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶',
					'难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗',
					'咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼',
					'哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头',
					'玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱',
					'强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火',
					'转圈', '磕头', '回头', '跳绳', '挥手', '激动',
					'闭嘴', '笑哭', '吐舌', '耶', '跳舞', '恐惧', '失望', '脸红', '无语', '奸笑', '嘿哈', '鬼混', '福', '合十', '强壮', '红包',
					'发财', '庆祝', '礼物'
				]
				let index = list.indexOf(word);
				var index1 = index + 100;
				return '^' + index1 + '^';

			},

			getGroupmemebrs(group_id, userid) {

				var members = uni.getStorageSync(group_id + '_group_members');
				if (!members) members = [];
				let result = [];
				members.forEach(item => {
					if (item.id == userid) result = item;

				})
				return result;
			},

			message_format(v) {


				if (v.message.type == 'text' && v.message.content.type != 'emotion') {

					try {
						v.message.content = JSON.parse(v.message.content);


					} catch (e) {
						//TODO handle the exception
						var content = v.message.content;
					}
					var type = v.message.content.type;
					if (type == 'remind') {

						if (v.message.content.remind.id == uni.getStorageSync('access_token')) {



							v.message.content.content = v.message.content.content.replace('@{' + v.message.content
								.remind.id + '}', '<span style="color:#ff0000;">有人@我</span>');
						} else {
							var str = v.message.content.content;
							//    var reg =/@{(.*)}/g;
							// var tt=reg.exec(str);

							var mem = this.getGroupmemebrs(v.group_id, v.message.content.remind.id);

							if (mem.id == v.message.content.remind.id) {
								var atname = mem.nickname;
							} else
								var atname = v.message.content.remind.nickname;
							if (v.self == 1) var color = "#ff0000;"
							else var color = "#2319dc";
							v.message.content.content = v.message.content.content.replace('@{' + v.message.content
								.remind.id + '}', '<span style="color:' + color + ';">@' + atname + "</span>");

						}
						var content = v.message.content.content;

					} else {
						var content = v.message.content;
					}

					if (this.isindexhtml(content)) var content1 = this.toText(content);
					else var content1 = content;

					var res = this.httpString(content);
					if (res != false) {

						v.message.type = 'url';
						v.message.content = {};
						v.message.content.content = content;
						v.message.content.urls = res;
					}
				}
				if (v.message.type == 'redpacket') {
					try {
						v.message.content = JSON.parse(v.message.content)
					} catch (e) {
						//TODO handle the exception
					}
					//console.log( v.message.content)
				}
				this.isshow = true;
				return v;
			},
			init() {

				try {
					if (this.item.message.type == 'emotion') {
						try {
							this.item.message.content = JSON.parse(this.item.message.content);

						} catch (e) {
							//TODO handle the exception


						}


						var content = this.item.message.content.content.replace(/\[\S{1,3}\]/gi, this.emotion);

						content = content.split('^');


						var imgs = [];
						for (var i = 0; i < content.length; i++) {
							if (content[i] >= 100 && content[i] <= 222) {
								imgs.push({
									'type': 'img',
									'content': "/static/emoji/" + content[i] + '.gif'
								})
							} else {
								imgs.push({
									'type': 'text',
									'content': content[i]
								})
							}
						}
						this.faces = imgs;
						//  if(this.item.message.content.content.indexOf('[')>-1) console.log(imgs)
					}


				} catch (e) {
					//TODO handle the exception

				}

				try {

					this.m = this.message_format(this.item);
					//console.log(this.m)
				} catch (e) {
					//TODO handle the exception

					this.m = this.item;

				}
			}
		},
		watch: {
			item(val) {
				this.init();
			}
		},
		mounted() {

			this.init();

			/// 
		}

	}
</script>

<style lang="scss" scoped>
	$redpackBgColor: #fa7f69;

	$reverseTextBgColor: #94baff;


	$voiceBgColor: #fafafa;
	$voiceColor: #000;
	$reverseVoiceBgColor: #94baff;
	$reverseVoiceColor: #fff;



	.emotion {
		height: 30px;
		width: 30px;
		;
		vertical-align: middle;
	}

	.chatimg {
		max-width: 70vw;
		vertical-align: top;
		border-radius: 5px;
	}

	.chatimg img {
		vertical-align: top;
	}

	.showname {
		display: inline-block;
		color: #2319DC;
	}


	.chat-tips {
		text-align: center;

		&-time {
			display: inline-block;
			padding: 0upx 20upx;
			font-size: 24upx;
			line-height: 40upx;

			color: #bbb;
			border-radius: 30upx;
		}
	}

	.chat-panel {
		width: 96%;
		padding: 0 2%;
		position: absolute;
		top: 0;
		left: 0;



	}

	.vedio {
		display: inline-block;
		float: left;
		width: calc(100% - 200upx);
		border-radius: 10upx;
		padding-top: 0upx;
		padding-bottom: 0upx;
		overflow: hidden;
		position: relative;

		z-index: 0;
	}

	.vedio .timeshow {
		position: absolute;
		right: 12upx;
		bottom: 16upx;
		font-size: 24upx;
		color: #FFFFFF;
		z-index: 999999999;
	}

	.vedio .play_btn {
		position: absolute;
		height: 80upx;
		width: 80upx;
		left: calc(50% - 40upx);
		top: calc(50% - 40upx);
		z-index: 999999999;
	}

	.vedio_src {
		max-width: 100%;
		border-radius: 10upx;
		max-height: 70vw;
		z-index: 0 !important;
	}

	.chat-item .item {
		display: inline;

	}

	.touch_menu {
		position: fixed;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.8);
		border: 1px #000 solid;
		border-radius: 10px;
		padding: 0px 10px;
		line-height: 30px;
		max-width: 100%;

		font-size: 14px;
		min-height: 40px;
	}

	.chat-item {
		display: flex;
		font-size: 32upx;
		padding-bottom: 20upx;
		padding: 10upx 12upx;
		position: relative;

		/*反向*/
		&-reverse {
			flex-direction: row-reverse;
            
			.loadingbox,
			.vedio {
				float: right;
			}

			.text,
			.redpack,
			.voice,
			.image {
				float: right;

				&:before {
					opacity: 0;
				}

				&:after {
					display: block;
					content: "";
					position: absolute;
					right: -12upx;
					top: 22upx;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 12upx 0upx 12upx 12upx;
				}
			}

			.image:after {
				opacity: 0
			}

			.text {
				color: #222 !important;
				// background-color: $reverseTextBgColor !important;
                background-color: #d3d3e7 !important;
				&:after {
					border-color: transparent transparent transparent #d3d3e7;
				}
			}

			.redpack {
				text-align: right !important;

				&:after {
					border-color: transparent transparent transparent $redpackBgColor;
				}

				&-open {
					&:after {
						border-color: transparent transparent transparent #FDE1C3;
					}
				}
			}

			.voice {
				background-color: $reverseVoiceBgColor !important;
				color: #222 !important;

				&:after {
					border-color: transparent transparent transparent $reverseVoiceBgColor;
				}

				.box {
					transform: rotate(180deg) translate(15px, 50%);
					transform-origin: center;
					right: 0;

					.first {
						background: $reverseVoiceColor;
					}

					.wifi-circle {
						border-color: $reverseVoiceColor;
					}
				}
			}

			.voice:hover,
			.text:hover {
				background-color: #d3d3e7 !important;

				&:after {
					border-color: transparent transparent transparent #c4cfff !important;
				}
			}
		}

		.avatar {
			width: 90upx;
			height: 90upx;
			border-radius: 12upx;
			background: rgba(0, 0, 0, 0.05);
			overflow: hidden;
            transition: opacity 0.3s;
              will-change: opacity;
			image {
				width: 90upx;
				height: 90upx;
                transition: opacity 0.3s;
                  will-change: opacity;
			}
		}

		.content {
			margin: 0 20upx;

			width: 70%;
			position: relative;

			.nickname {
				max-width: 100%;
				height: 24upx;
				padding-bottom: 10upx;
				font-size: 24upx;
				line-height: 24upx;
				color: #222;
				text-align: left;

			}
		}

		.text,
		.redpack,
		.voice,
		.image {

			display: inline-block;
			width: auto;
			border-radius: 12upx;
			max-width: 100%;
			position: relative;


			&:before {
				display: block;
				content: "";
				position: absolute;
				left: -12upx;
				top: 26upx;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 12upx 12upx 12upx 0;
			}
		}

		.redpack {
			width: 200px;
			height: 86px;
			text-align: left;
			padding: 0px 10px;
		}

		.redpack image {
			height: 40px;
			width: 30px;
		}

		.redpack .info {
			display: table;
			table-layout: fixed;
			width: 100%;
			height: 60px;
			line-height: 60px;
		}

		.redpack .info view {
			display: table-cell;
			vertical-align: middle;
			padding: 0px 0px;
			margin: 0px 0px;
		}

		.redpack .info view.icon {
			width: 55px;
			text-align: center;
		}

		.redpack .info view.showtext {
			color: #fff;
			font-size: 16px;
			;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.redpack .info view.icon image {
			vertical-align: middle;
		}

		.redpack .title {
			height: 25px;
			line-height: 25px;
			color: #eee;
			font-size: 12px;
			border-top: #fdac53 solid 1px;
		}

		.redpack.redpack-open .title {
			color: #fef5ec;
			border-top: #ffe6ca solid 1px;
		}

		.image:before {
			opacity: 0
		}

		.text {
			line-height: 50upx;

			padding: 12upx 20upx;
			background: #e5e5e5;
			color: #000;
			word-break: break-all;

			&:before {
				border-color: transparent #e5e5e5 transparent transparent;
			}
		}

		.text:hover,
		.voice:hover {
			background-color: #bbb;

			&:after {
				border-color: transparent #bbb transparent transparent;
			}
		}

		.redpack {
			background: $redpackBgColor;
			color: #fff;

			&:before {
				border-color: transparent $redpackBgColor transparent transparent;
			}

			&-open {
				background: #fce1c3;

				.redpack-body-image {
					background: #FB998A;
				}

				.redpack-body-image::before {
					background: #FFF3E7;
					top: -110upx;
				}

				&:before {
					border-color: transparent #FDE1C3 transparent transparent;
				}
			}

			&-body {
				padding: 20upx;
				display: flex;
				align-items: center;

				&-image {
					background: #CD3D35;
					width: 70upx;
					height: 90upx;
					overflow: hidden;
					position: relative;
					border-radius: 6upx;

					&:before {
						content: "";
						display: block;
						width: 140upx;
						height: 140upx;
						border-radius: 50%;
						position: absolute;
						top: -90upx;
						left: 50%;
						transform: translateX(-50%);
						background: #FA5151;
					}

					&:after {
						position: relative;
						display: block;
						content: '￥';
						width: 28upx;
						height: 28upx;
						background-color: #f2d252;
						color: #E08B34;
						border-radius: 28upx;
						line-height: 32upx;
						font-size: 24upx;
						transform: scale(.8);
						margin: 36upx auto;
						text-align: center;
					}
				}

				&-content {
					padding-left: 20upx;

				}
			}

			&-footer {
				font-size: 24upx;
				padding: 10upx 20upx;
				background: #fff;
				color: #999;
				border-bottom-left-radius: 12upx;
				border-bottom-right-radius: 12upx;
			}
		}

		.voice {
			display: inline-block;
			width: auto;
			position: relative;
			background: $voiceBgColor;
			color: $voiceColor;

			&:before {
				border-color: transparent $voiceBgColor transparent transparent;
			}

			&-text {
				margin-left: 60upx;
				line-height: 90upx;
				margin-right: 60upx;
			}

			&-text-right {
				text-align: right;
			}

			&-play {
				.second {
					animation: fadeInOut 1s infinite 0.2s;
				}

				.third {
					animation: fadeInOut 1s infinite 0.4s;
				}
			}

			.first {
				background: $voiceColor;
			}

			.wifi-circle {
				border-color: $voiceColor;
			}
		}

	}

	/*语音*/
	.box {
		position: absolute;
		top: 50%;
		transform: translate(30upx, -50%);
	}

	.wifi-symbol {
		width: 25px;
		height: 25px;
		// box-sizing: border-box;
		position: relative;
		overflow: hidden;
		transform: rotate(135deg);
	}

	.wifi-circle {
		border: 2px solid #c3c3c3;
		border-radius: 50%;
		position: absolute;
	}

	.first {
		width: 2px;
		height: 2px;
		background: #fff;
		top: 22px;
		left: 22px;
	}

	.second {
		width: 12px;
		height: 12px;
		top: 17px;
		left: 17px;
	}

	.third {
		width: 20px;
		height: 20px;
		top: 12px;
		left: 12px;
	}

	@keyframes fadeInOut {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	/**/
	.loading {
		//loading动画
		display: flex;
		justify-content: center;

		@keyframes stretchdelay {

			0%,
			40%,
			100% {
				transform: scaleY(0.6);
			}

			20% {
				transform: scaleY(1.0);
			}
		}

		.spinner {
			margin: 20upx 0;
			width: 60upx;
			height: 25px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				background-color: #ff9800;
				height: 25px;
				width: 3px;
				border-radius: 3px;
				animation: stretchdelay 1.2s infinite ease-in-out;
			}

			.rect2 {
				animation-delay: -1.1s;
			}

			.rect3 {
				animation-delay: -1.0s;
			}

			.rect4 {
				animation-delay: -0.9s;
			}

			.rect5 {
				animation-delay: -0.8s;
			}
		}
	}

	image {
		will-change: transform;
	}

	.cssload-container {
		width: 100%;
		height: 17px;
		text-align: center;
	}

	.cssload-zenith {
		width: 17px;
		height: 17px;
		margin: 0 auto;
		border-radius: 50%;
		border-top-color: transparent;
		border-left-color: transparent;
		border-right-color: transparent;
		box-shadow: 1px 1px 0px rgb(255, 255, 255);
		animation: cssload-spin 690ms infinite linear;
	}



	@keyframes cssload-spin {
		100% {
			transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	/*红包小图标*/
	@font-face {
		font-family: "redpackfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMcAAsAAAAABugAAALQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBcIFeATYCJAMICwYABCAFhG0HMxsHBsgekiRQQKEUijquIAIkxMPT2v/OnZ1ns188qUZtAmSTkEikJCKpEeqHRDTvtP2zrv7NrtNrZEk0khlnKp3laf0BnYSTeFbdobqDbWl6PM0n7p3+3wAKZL7zLse1N03qAowDKdA9MIoSaIOE3jB2aQnpNIFiWjbDidbuYfCS+ZMCcdVslMGrEZBlNd0V2gMrM8Qd7rppT3oD3M6+H38UhhdIWhX4VaevtGhQ/z01yKrWmjXTCUF4nA3qOipsApk4P5g4yVWoDFcl4WYePKs8+J7aNIlJPFUv1L/OL+0Dk1BAJ2EkoipvApn+nAIub7oZVV8Fsvvcfx/XkiXV7fwRrfc9Xj8bhgx5N8NvRp3cG3I8vXz0pNfOhI4AevDkzAlJgnItv/NQCR5e3ncqPFHa93z9JEKTSLl0Wf+9d7H/8b9vP/xyu1l5D8uN++wTNuD/dvTrq4HRX5++i6PliVOv3/vVN+4mmI509oYOH87wpAxnjKF36eWbsXxfn8if3nCxfjnxz78PxF438/vx8d+vz3HqAZovldk1RXJ/Y/bnnX1z/tX/vSQ3gA//VuXM13zJsMwFulRwBlIpXNiWHbFvTNkSDmaSU1ypWFMUNIA9Iz5v1YzTOxO6xmnv6piqUOlaJDN9Ey21LbR17aPY0La+NopzFdkbWLcNEIbcRTLgLSpD3pKZ/gktE76jbShcUVyM4B1ry2FGTZzIgmhYWcFmlTloaBYoLx8kxgWbzOvijDlKuG4O44Lc/Ha6jTgIP2KOvmgsFIJiypkdt4LziM3GsJMzC1FFrkkIZ2VeHh26Uq7K7IAcxxEygdBgihWYmYpxoEl3AXU+P4gwWmAj4xMtbf5RBKczD44VyJW/gGxTOBa1fMolukVGhQSBwiiOscNagY2wBQkGcw4PsyBUQi7ThphTpTzUiS5V5F6vsotuDxS+NkVgd4UezfNzBNEFAA==') format('woff2');
	}

	.redpack-icon {
		font-family: "redpackfont" !important;
	}

	.redpack-icon:before {
		content: "\e626";
		color: red;
		display: inline-block;
		transform: scale(1.5);
		margin-right: 10upx;
	}

	.loadingbox {
		height: 80upx;
		width: 70upx;
		justify-content: center;
		line-height: 80upx;
		display: inline-block;
		text-align: center;
		vertical-align: top;
	}

	.loadingbox image {
		height: 36upx;
		width: 36upx;
		vertical-align: middle;
	}
</style>